import React , {useEffect,useState} from 'react';
import './index.css';
const NumberClock = () => {
  const [time,setTime] = useState(new Date());
  useEffect(()=>{
    // 定义延迟时间与清除时间
    const interval = setInterval(()=>setTime(new Date()),1000);
    return () => clearInterval(interval)
  },[])
   
  // 定义时间格式:时分秒都是两位数
  const formatTimeUnit = (unit) => unit.toString().padStart(2,'0');
  // 定义时分秒
  const hours = formatTimeUnit(time.getHours());
  const minutes = formatTimeUnit(time.getMinutes());
  const seconds =formatTimeUnit(time.getSeconds());

  return (
    <div className='clockdemo'>
      <div className='clockdemo_number'>
        <div className='number'>
          <div className='digit'>{hours[0]}</div>
          <div className='digit'>{hours[1]}</div>
        </div>
        <span className='separator'>:</span>
        <div className='number'>
          <div className='digit'>{minutes[0]}</div>
          <div className='digit'>{minutes[1]}</div>
        </div>
        <span className='separator'>:</span>
        <div className='number'>
          <div className='digit'>{seconds[0]}</div>
          <div className='digit'>{seconds[1]}</div>
        </div>
      </div>
    </div>
  )
}
export default NumberClock;